<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Coming Soon - Ace Admin</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="../assets/css/bootstrap.css" />
		<link rel="stylesheet" href="../components/font-awesome/css/font-awesome.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="../assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="../assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
		
		<link rel="stylesheet" href="frontend.css" />
		<style>
		.coming-soon .jumbotron {
			background-image: url("../assets/css/images/meteorshower2.jpg");
		}
		</style>

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="../assets/css/ace-part2.css" class="ace-main-stylesheet" />
			<link rel="stylesheet" href="../assets/css/ace-ie.css" />
		<![endif]-->
		
		
		<link rel="stylesheet" href="frontend.css" />

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
		<!--[if lte IE 8]>
		<script src="../components/html5shiv/dist/html5shiv.min.js"></script>
		<script src="../components/respond/dest/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="no-skin pos-rel coming-soon">
		<div id="navbar" class="navbar navbar-default navbar-fixed-top">
			<div class="navbar-container container" id="navbar-container">
				<div class="navbar-header navbar-left">
					<a href="#" class="navbar-brand">
						<small>
							<i class="fa fa-leaf"></i>
							<span class="light-green">Ace</span> Services
						</small>
					</a>
				</div>

				<div class=" navbar-header navbar-right" role="navigation">
					<div id="menu" class="collapse navbar-collapse">
						<ul class="nav navbar-nav navbar-right" role="tablist">
							<li>
								<a href="#contact-modal" role="button" data-toggle="modal">
									<i class="ace-icon fa fa-envelope fa-2x"></i>
									<span class="hidden-md hidden-lg"> &nbsp; Contact</span>
								</a>
							</li>
						</ul>
						
					</div>				
				</div>
			</div><!-- /.navbar-container -->
		</div>
		
		<div class="main-container">
 
			<div class="jumbotron">
			  <div class="container">
				<div class="text-center">
					<div class="row">
					 <div class="col-md-6 col-md-offset-3">
						<h3 class="white">
							<i class="fa fa-wrench icon-animated-wrench orange2 bigger-150"></i>
							&nbsp;
							We are almost ready
						</h3>
						<h2 class="white"><span class="bigger-150"><span class="light-green">Ace</span> application is coming soon</span></h2>						
					
					<br />
					<br />
					<br />

					
						<div>
						
							<div class="row">
								<div class="col-xs-6 col-sm-3">
									<div class="timer" id="timer-day" data-type="day">
										<div class="timer-value">14</div>
										<div class="timer-text"><span class="label label-warning arrowed-in arrowed-in-right">Days</span></div>
									</div>
								</div>
								<div class="col-xs-6 col-sm-3">
									<div class="timer" id="timer-hour" data-type="hour">
										<div class="timer-value">9</div>
										<div class="timer-text"><span class="label label-purple arrowed-in arrowed-in-right">Hours</span></div>
									</div>
								</div>
								
								<div class="visible-xs clearfix"></div>
								<div class="visible-xs space space-12"></div>
								
								<div class="col-xs-6 col-sm-3">
									<div class="timer" id="timer-minute" data-type="minute">
										<div class="timer-value">26</div>
										<div class="timer-text"><span class="label label-success arrowed-in arrowed-in-right">Minutes</span></div>
									</div>
								</div>
								<div class="col-xs-6 col-sm-3">
									<div class="timer" id="timer-second" data-type="second">
										<div class="timer-value">11</div>
										<div class="timer-text"><span class="label label-primary arrowed-in arrowed-in-right">Seconds</span></div>
									</div>
								</div>
							</div>
						
						</div>
						
					<br />
					<br />
					<br />
						<div class="text-left white bigger-125">We'll let you know as soon as we are finished!</div>
						<div class="space-6"></div>
						<div class="input-group input-group-lg">
							<input type="email" placeholder="Type your email address" class="form-control input-transparent">
							<span class="input-group-btn">
								<button class="btn btn-white btn-primary btn-lg no-border" type="button">Notify me!</button>
							</span>
						</div>
						

					
						
					 </div>
					</div>
					
					<br />
					<br />
					<br />
					
					
					<div class="text-center social-tools">
						<span class="action-buttons">
							<a href="#">
								<i class="ace-icon fa fa-twitter-square light-blue fa-3x"></i>
							</a>
							
							<a href="#">
								<i class="ace-icon fa fa-facebook-square text-primary fa-3x"></i>
							</a>
							
							<a href="#">
								<i class="ace-icon fa fa-rss-square orange fa-3x"></i>
							</a>
						</span>
					</div>
						
				</div>
			  </div>
			</div>
			
			
			<div id="contact-modal" class="modal fade" tabindex="-1">
				<div class="modal-dialog">
				  <div class="modal-content">
					<div class="modal-header">
						<div class="clearfix">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="">&times;</span></button>
							<h3 class="text-primary no-padding no-margin inline">Contact Us</h3>
						</div>
					</div>
					
					
					<div class="modal-body padding-25">

							<div class="space-6"></div>
							<div class="row">
								<div class="col-xs-12">
									<form>
										<div class="row">
											<div class="col-xs-12">
												<div class="form-group">
													<input type="text" placeholder="Name" class="form-control input-lg" />
												</div>
												<div class="form-group">
													<input type="email" placeholder="Email" class="form-control input-lg" />
												</div>
												<div class="form-group">
													<input type="tel" placeholder="Phone Number" class="form-control input-lg" />
												</div>
									
												<div class="form-group">
													<textarea placeholder="Your Message" class="form-control"></textarea>
												</div>
											</div>

										</div>
									</form>
								</div>
							</div>
						
					</div>
					
					
					
	
					<div class="modal-footer no-margin-top">
						<div class="text-center">
							<button class="btn btn-primary no-border" type="button">Send Message</button>
						</div>
					</div>
				  </div><!-- /.modal-content -->
				 </div><!-- /.modal-dialog -->
			</div>


		</div>


		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="../components/jquery/dist/jquery.js"></script>
		<!-- <![endif]-->
		<!--[if IE]>
		<script src="../components/jquery.1x/dist/jquery.min.js"></script>
		<![endif]-->

		<script src="../components/bootstrap/dist/js/bootstrap.js"></script>
	
		<script type="text/javascript">
		jQuery(function($) {

			$('#contact-modal textarea').css('min-height', '150px');
	
			//simple countdown timer on coming soon page
			var remainingTime = 0;
			var secondsPerDay = 24 * 3600;
			var secondsPerHour = 3600;
			var secondsPerMinute = 60;
			
			$('.timer').each(function() {
			
				var type = $(this).attr('data-type');
				var value = parseInt($(this).find('.timer-value').text()) || 0;
				
				switch(type) {
					case 'day':
						remainingTime += (value * secondsPerDay);
					break;
					
					case 'hour':
						remainingTime += (value * secondsPerHour);
					break;
					
					case 'minute':
						remainingTime += (value * secondsPerMinute);
					break;
					
					case 'second':
						remainingTime += value;
					break;
				}
			});
			
					

			var interval = setInterval(function() {
				remainingTime -= 1;
				if(remainingTime < 1) {
					clearInterval(interval);
					return;
				}
				
				
				 var days = parseInt(remainingTime / secondsPerDay);
				var hours = parseInt((remainingTime - (days * secondsPerDay)) / secondsPerHour);
				var minutes = parseInt((remainingTime - (days * secondsPerDay) - (hours * secondsPerHour)) / secondsPerMinute);
				var seconds = remainingTime % 60;

				
				$('#timer-second .timer-value').text(seconds);
				if(seconds == 59) {
					$('#timer-minute .timer-value').text(minutes);
					$('#timer-hour .timer-value').text(hours);
					$('#timer-day .timer-value').text(days);
				}

			}, 1000);

		});
		</script>

	</body>
</html>
